<template>
  <div class="">
    <input type="text" v-model.number="num1" />
    <select name="" id="" v-model="sel">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model.number="num2" />
    <button @click="com">=</button>
    <span>{{ res }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: "",
      num2: "",
      sel: "+",
      res: "",
    };
  },
  mounted() {},
  methods: {
    com() {
      switch (this.sel) {
        case "+":
          this.res = this.num1 + this.num2;
          break;
        case "-":
          this.res = this.num1 - this.num2;
          break;
        case "*":
          this.res = this.num1 * this.num2;
          break;
        case "/":
          this.res = this.num1 / this.num2;
          break;

        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss"></style>
